<template>
  <div class="container">
    <div class="header">
      <h3>账号</h3>
      <div class="Head_portrait">
        <div class="img">
          <img class="head" src="../../assets/head.jpg" alt="" />
        </div>
        <div class="login-level">
            <span class="login" @click="toLogin">立即登录</span>
          <div class="level"><span>Lv</span>0</div>
        </div>
        <div class="Sign-in">签到</div>
      </div>
      <div class="info">
        <div class="item1">
          <div class="dynamic">动态</div>
          <div class="text">0</div>
        </div>
        <div class="item1">
          <div class="dynamic">关注</div>
          <div class="text">0</div>
        </div>
        <div class="item1">
          <div class="dynamic">粉丝</div>
          <div class="text">0</div>
        </div>
        <div class="item1">
          <i></i>
          <div class="dynamic">编辑资料</div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="main">
        <div class="myMessage">
          <div class="left_item">
            <i class="iconfont icon-xiaoxi"></i>
            <span class="text">我的消息</span>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
        <div class="Member-Center">
          <div class="left_item">
            <i class="iconfont icon-huiyuan-"></i>
            <span class="text">会员中心</span>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
        <div class="integral">
          <div class="left_item">
            <i class="iconfont icon-gouwuche"></i>
            <span class="text">积分商城</span>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
        <div class="FreeOfTraffic">
          <div class="left_item">
            <i class="iconfont icon-shoutibao"></i>
            <span class="text">在线听歌免流量</span>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
        <div class="setUp">
          <div class="left_item">
            <i class="iconfont icon-shezhi"></i>
            <span class="text">设置</span>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
        <div class="Thetheme">
          <div class="left_item">
            <i class="iconfont icon-zhuti"></i>
            <span class="text">主题换肤</span>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
        <div class="Thenight">
          <div class="left_item">
            <i class="iconfont icon-diandengpao"></i>
            <span class="text">夜间模式</span>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
        <div class="Timeswitch">
          <div class="left_item">
            <i class="iconfont icon-dingshi"></i>
            <span class="text">定时开关</span>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
        <div class="Music-alarm-clock">
          <div class="left_item">
            <i class="iconfont icon-dingshi1"></i>
            <span class="text">音乐闹钟</span>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
        <div class="Drivingmode">
          <div class="left_item">
            <i class="iconfont icon-qiche"></i>
            <span class="text">驾驶模式</span>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
        <div class="share">
          <div class="left_item">
            <i class="iconfont icon-fenxiang"></i>
            <span class="text">分享网易云</span>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
        <div class="about">
          <div class="left_item">
            <i class="iconfont icon-guanyu"></i>
            <span class="text">关于</span>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
        <div class="exit"><span class="exit-text">退出</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgurl: "",
    };
  },
  computed: {
    imgUrl() {
      if (this.imgurl === "") {
        console.log(11);
        return "../../assets/head.jpg";
      }
    },
  },
  watch: {},
  methods: {
    toLogin() {
      this.$router.push("/");
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  .header {
    height: 32%;
    min-height: 220px;
    padding-left: 25px;
    padding-right: 25px;
    border-bottom: 1px solid rgb(240, 236, 237);
    .Head_portrait {
      display: flex;
      align-items: center;
      height: 50%;
      .img {
        height: 80px;
        width: 80px;
        margin-right: 15px;
        .head {
          height: 80px;
          width: 80px;
          border-radius: 40px;
        }
      }
      .Sign-in {
        color: rgb(148, 142, 144);
        margin-left: 100px;
        border: 1px solid rgb(186, 178, 179);
        border-radius: 15%;
        height: 20px;
        width: 45px;
      }
      .login-level {
        float: left;
        .login {
          font-size: 20px;
          margin-bottom: 5px;
        }
        .level {
          margin-top: 5px;
          height: 20px;
          width: 60px;
          border: 2px solid rgb(180, 175, 176);
          border-radius: 10px;
        }
      }
    }
    .info {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;
    }
  }
  .body {
    height: 67%;
    overflow: auto;
    .main {
      overflow: auto;
      .icon-jiantouyou {
        // margin-left: 200px;
        font-size: 20px;
      }

      .text {
        font-size: 20px;
        color: rgb(94, 85, 85);
      }
      .myMessage {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px 6px 15px;
        border-bottom: 1px solid rgb(240, 236, 237);
      }
      .Member-Center {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px 6px 15px;
        border-bottom: 1px solid rgb(240, 236, 237);
      }
      .integral {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px 6px 15px;
        border-bottom: 1px solid rgb(240, 236, 237);
      }
      .FreeOfTraffic {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px 6px 15px;
        border-bottom: 1px solid rgb(240, 236, 237);
      }
      .setUp {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px 6px 15px;
        border-bottom: 1px solid rgb(240, 236, 237);
      }
      .Thetheme {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px 6px 15px;
        border-bottom: 1px solid rgb(240, 236, 237);
      }
      .Thenight {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px 6px 15px;
        border-bottom: 1px solid rgb(240, 236, 237);
      }
      .Timeswitch {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px 6px 15px;
        border-bottom: 1px solid rgb(240, 236, 237);
      }
      .Music-alarm-clock {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px 6px 15px;
        border-bottom: 1px solid rgb(240, 236, 237);
      }
      .Drivingmode {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px 6px 15px;
        border-bottom: 1px solid rgb(240, 236, 237);
      }
      .share {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px 6px 15px;
        border-bottom: 1px solid rgb(240, 236, 237);
      }
      .about {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 15px 6px 15px;
        border-bottom: 1px solid rgb(240, 236, 237);
      }
      .exit {
        color: rgb(175, 162, 162);
        height: 30px;
        border-radius: 10px;
        background-color: rgb(52, 41, 67);
        padding: 10px 15px 10px 15px;
      }
      .left_item {
        display: flex;
        align-items: center;
        .icon-xiaoxi {
          font-size: 30px;
          margin-right: 5px;
        }
        .icon-huiyuan- {
          font-size: 30px;
          margin-right: 5px;
        }
        .icon-gouwuche {
          font-size: 30px;
          margin-right: 5px;
          color: rgb(71, 69, 69);
        }
        .icon-shoutibao {
          font-size: 30px;
          margin-right: 5px;
        }
        .icon-shezhi {
          font-size: 30px;
          margin-right: 5px;
        }
        .icon-zhuti {
          font-size: 30px;
          margin-right: 5px;
        }
        .icon-diandengpao {
          font-size: 30px;
          margin-right: 5px;
        }
        .icon-dingshi {
          font-size: 30px;
          margin-right: 5px;
        }
        .icon-qiche {
          font-size: 30px;
          margin-right: 5px;
        }
        .icon-fenxiang {
          font-size: 30px;
          margin-right: 5px;
        }
        .icon-dingshi1 {
          font-size: 30px;
          margin-right: 5px;
        }
        .icon-guanyu {
          font-size: 30px;
          margin-right: 5px;
        }
      }
    }
  }
}
.fade-enter{
        opacity: 0;
    }
    .fade-enter-active{
        transition: opacity .3s;
    }
    .fade-leave{
        opacity: 1;
    }
    .fade-leave-active{
        opacity: 0;
        transition: opacity .3s;
    }
</style>